<template>
  <jax-desc :title="title">
    <div class="action" style="margin-bottom: 15px">
      <el-button type="primary" icon="plus" @click="handleAdd">添加</el-button>
      <el-button type="primary" icon="plus" @click="handleImport">导入</el-button>
    </div>
    <!-- <el-button icon="plus" @click="handleImport" style="margin-bottom: 15px">导入</el-button> -->
    <el-table :data="modelValue" border :height="modelValue.length > 5 ? '300px' : null">
      <el-table-column label="排序" width="100px">
        <template #default="scope">
          <el-input v-model="scope.row._rank"></el-input>
        </template>
      </el-table-column>
      <el-table-column :label="item.label" v-for="(item, index) in json" :index="index">
        <template #default="scope">
          <el-input
            v-model="scope.row[item.name || item.label]"
            :placeholder="`请输入${item.label}`"
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template #default="scope">
          <el-button link type="primary" icon="delete" @click="modelValue.splice(scope.$index, 1)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <ImportData v-model="importData.show"></ImportData>
  </jax-desc>
</template>
<script setup>
import { ElMessage } from 'element-plus'
import ImportData from './ImportData.vue'

const emits = defineEmits('update:modelValue')
const props = defineProps({
  title: String,
  modelValue: Array,
  json: Array,
})

const importData = reactive({
  show: false,
})

// 新增
const handleAdd = () => {
  props.modelValue.push({
    _rank: props.modelValue.length + 1,
  })

  props.modelValue = props.modelValue.sort((a, b) => {
    return a._rank - (b._rank || 9999999)
  })

  emits('update:modelValue', props.modelValue)
}

const handleImport = () => {
  importData.show = true
}
</script>
<style lang="scss" scoped></style>
